<div class="middle">
  <div class="middle-header">
    <div class="container-fluid">
      <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
      <alerts alerts="alerts"></alerts>
      <div ng-if="!loaded" class="mar-top-xl">Loading...</div>
      <div ng-if="loaded && error" class="empty-state-message text-center">
        <h2>The config map could not be loaded.</h2>
        <p>{{error | getErrorDetails}}</p>
      </div>
      <div ng-if="loaded && !error">
        <h1 class="contains-actions">
          <div class="pull-right dropdown">
            <!--
              `canIAddToProject` returns true if you can update any resource.
              We'll use this as a best-effort check to see if we should show the
              button.
            -->
            <button ng-if="project.metadata.name | canIAddToProject"
                    type="button"
                    class="btn btn-default hidden-xs"
                    ng-click="addToApplication()">
              Add to Application
            </button>
            <button ng-if="'configmaps' | canIDoAny" type="button" class="dropdown-toggle btn btn-default actions-dropdown-btn hidden-xs" data-toggle="dropdown">
              Actions
              <span class="caret"></span>
            </button>
            <!-- Check `canIAddToProject` for the mobile menu since "Add to Application" uses it. -->
            <a href=""
               ng-if="project.metadata.name | canIAddToProject"
               class="dropdown-toggle actions-dropdown-kebab visible-xs-inline"
               data-toggle="dropdown"><i class="fa fa-ellipsis-v" aria-hidden="true"></i><span class="sr-only">Actions</span></a>
            <ul class="dropdown-menu dropdown-menu-right actions action-button">
              <li ng-if="project.metadata.name | canIAddToProject" class="visible-xs">
                <a href="" role="button" ng-click="addToApplication()">Add to Application</a>
              </li>
              <li ng-if="configMapsVersion | canI : 'update'">
                <a ng-href="{{configMap | editResourceURL}}" role="button">Edit</a>
              </li>
              <li ng-if="configMapsVersion | canI : 'update'">
                <a ng-href="{{configMap | editYamlURL}}" role="button">Edit YAML</a>
              </li>
              <li ng-if="configMapsVersion | canI : 'delete'">
                <delete-link
                  kind="ConfigMap"
                  resource-name="{{configMap.metadata.name}}"
                  project-name="{{configMap.metadata.namespace}}"
                  alerts="alerts">
                </delete-link>
              </li>
            </ul>
          </div>
          {{configMap.metadata.name}}
          <small class="meta">created <span am-time-ago="configMap.metadata.creationTimestamp"></span></small>
        </h1>
        <labels labels="configMap.metadata.labels" clickable="true" kind="config-maps" title-kind="config maps" project-name="{{configMap.metadata.namespace}}" limit="3"></labels>
      </div>
    </div>
  </div><!-- /middle-header-->
  <div class="middle-content">
    <div class="container-fluid">
      <div ng-if="configMap" class="row">
        <div class="col-sm-12">
          <div ng-if="!(configMap.data | hashSize)" class="empty-state-message text-center">
            <h2>The config map has no items.</h2>
          </div>
          <div ng-if="configMap.data | hashSize" class="table-responsive scroll-shadows-horizontal">
            <table class="table table-bordered table-bordered-columns config-map-table key-value-table">
              <tbody>
                <tr ng-repeat="(prop, value) in configMap.data">
                  <td class="key">{{prop}}</td>
                  <td class="value">
                    <truncate-long-text
                        content="value"
                        limit="1024"
                        newline-limit="20"
                        expandable="true"
                        linkify="true">
                    </truncate-long-text>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <annotations annotations="configMap.metadata.annotations"></annotations>
        </div><!-- /col-* -->
      </div>
    </div>
    <overlay-panel class="overlay-panel-as-modal add-config-to-application" show-panel="addToApplicationVisible" handle-close="closeAddToApplication">
      <add-config-to-application project="project" api-object="configMap" on-cancel="closeAddToApplication" on-complete="closeAddToApplication"></add-config-to-application>
    </overlay-panel>
  </div><!-- /middle-content -->
</div>
